<template>
  <div class="all">
    <div class="keylogin">
      <a href="">&lt;</a>
      <b>一键登录</b>
    </div>
    <div class="content1">
      <div id="img_1">
        <div class="img_yang">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2Fa66d0169ly8gt9k8ar19ij20c80f1mye.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634118103&t=b76c2071eeb259934d95ee406c41379b"
            width="80px"
            alt=""
          />
        </div>
      </div>
      <!-- ⬆️图片⬇️手机号 -->
      <div class="tel_num2">
        <b>{{ msg }}</b>
      </div>
      <div>
        <van-button type="primary" size="large" class="next1" @click="handle1"
          >一键登录</van-button
        >
      </div>
      <!-- 其他方式登录 -->

      <div class="third_party1">
        <van-divider
          :style="{
            color: '#969799',
            borderColor: '#969799',
            padding: '0 30%',
          }"
        >
          其他方式登录
        </van-divider>
      </div>
      <div class="thrid_1">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
          <span> <router-link to="/register">微信</router-link></span>
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--"></use></svg
          ><span> <router-link to="/register">账号密码</router-link></span>
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhuce"></use>
          </svg>
          <span> <router-link to="/register">注册</router-link></span>
        </div>
      </div>
      <div class="agreement">
        <p>
          登录注册代表同意中国移动认证服务条款和<br />
          用户协议、隐私政策
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Divider } from "vant";

export default {
  data() {
    return {
      msg: localStorage
        .getItem("phone")
        .split(",")
        .splice(3, 4, "****")
        .join(","),
    };
  },
  components: {
    VanButton: Button,
    VanDivider: Divider,
  },
  mounted() {
    this.phone();
  },
  methods: {
    handle1() {
      localStorage.setItem("username", "街哥");
      localStorage.setItem("followed", "857853");
      localStorage.setItem("fans", "36871");
      this.$router.push("/");
    },
    phone() {
      let num = localStorage.getItem("phone").split("");
      num.splice(3, 4, "*", "*", "*", "*");
      this.msg = num.join("");
    },
  },
};
</script>

<style lang="less" scoped>
html body {
  height: 100%;
}
#app {
  height: 100%;
}
.content1 {
  height: 90%;
  font-size: 14px;
}
.all {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.keylogin {
  font-size: 20px;
  text-align: center;
  position: relative;
  height: 10%;
}
.keylogin a {
  position: absolute;
  left: 0px;
}
.content1 {
  padding: 10px;
}
/* 图片 */
#img_1 {
  width: 100%;
  height: 30%;
  line-height: 30%;
}
.img_yang {
  height: 80px;
  width: 80px;
  border-radius: 40px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -30px;
}
.img_yang img {
  position: absolute;
}
.next {
  margin-top: 90px;
}
/* 手机号码 */
.tel_num2 {
  text-align: center;
  font-size: 20px;
}
/* 按键 */
.next1 {
  margin-top: 20px;
  border-radius: 999999px;
}
.third_party1 {
  height: 10%;
  width: 100%;
  text-align: center;
}

/* 图标文字 */
.icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* 第三方登录 */
.thrid_1 {
  display: flex;
  line-height: 40px;
  justify-content: space-between;
}
.thrid_1 span {
  vertical-align: super;
}
/* 最后一行文字 */
.agreement {
  width: 100%;
  margin-top: 120px;
  margin-left: 10%;
}
</style>
